<ion-view id="shapeshift" show-tabs>
  <ion-nav-bar class="bar-royal">
    <ion-nav-back-button>
    </ion-nav-back-button>
    <ion-nav-title>ShapeShift</ion-nav-title>
  </ion-nav-bar>

  <ion-content scroll="false" class="ng-hide" ng-show="!shifts.data">
    <div class="start-background">
      <img src="img/logo-shapeshift.svg" width="200">
      <div class="start-description">
        <h4>The Safest, Fastest Asset Exchange on Earth</h4>
        <p>Trade any leading blockchain asset for any other. Protection by Design. No Account Needed.</p>
      </div>
      <div class="start-buttons">
        <button class="button button-standard button-primary" ui-sref="tabs.shapeshift.shift" no-low-fee>Start</button>
        <button class="button button-standard button-secondary"
          ng-click="openExternalLink('https://shapeshift.io')">Visit Shapeshift.io &rarr;</button>
      </div>
    </div>
  </ion-content>

  <ion-content class="ng-hide" ng-show="shifts.data">

    <div class="main-header" ng-click="update()">
      <img src="img/logo-shapeshift.svg" width="200">
    </div>

    <div class="m20t">
      <div class="list">
        <a class="item item-icon-left item-icon-right" href
          ui-sref="tabs.shapeshift.shift"  no-low-fee>
          <i class="icon">
            <img src="img/icon-shapeshift.svg" width="30">
          </i>
          Shift
          <i class="icon bp-arrow-right"></i>
        </a>
      </div>

      <div class="list">
        <div class="item item-divider" translate>
          Transactions
        </div>
        <div ng-repeat="(id, item) in shifts.data | orderObjectBy:'date':true track by $index"
           class="item">
          <h2 copy-to-clipboard="item.address">
            <span class="item-amount">{{ item.amount }}</span>
            <span class="ellipsis">{{item.title || item.address}}</span>
          </h2>
          <span class="item-note">{{item.date | amTimeAgo}}</span>
          <p>
          <div>
            <span class="assertive" ng-if="item.status == 'failed'">Failed</span>
            <span class="balanced" ng-if="item.status == 'complete'">Completed</span>
            <span class="dark" ng-if="item.status == 'received'">Pending</span>
            <span class="text-gray" ng-if="item.status == 'no_deposits'">Pending</span>
          </div>
          </p>
        </div>
      </div>

    </div>
  </ion-content>
</ion-view>
